<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <div v-if="tmNum - 1 == index" class="exName">
        {{ item.name }}{{ item.typeCode }}
      </div>

      <!-- FIB题型 -->
      <div v-if="item.typeCode == 'FIB' && tmNum - 1 == index">
        <Fib
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
          @nodone="nodone($event)"
          @sendNum="sendNum"
          @sendAnswerLen="getAnswerLen($event)"
        ></Fib>
      </div>

      <!-- SMW题型 -->
      <!-- <div v-if="item.typeCode == 'SMW' && tmNum - 1 == index">
        <Audioplayer :Num="tmNum" :url="item.url" :item="item"></Audioplayer>
      </div> -->

      <div v-if="item.typeCode == 'SMW' && tmNum - 1 == index">
        <Smw
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></Smw>
      </div>
      <!-- ASQ题型 -->
      <div v-if="item.typeCode == 'ASQ' && tmNum - 1 == index">
        <Asq
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></Asq>
      </div>
      <!-- MCS题型 无录音型-->
      <div
        v-if="
          item.typeCode == 'MCS' &&
          item.subjectType == '3' &&
          tmNum - 1 == index
        "
      >
        <Mcs :Num="tmNum" :item="item" @sendAnswer="getAnswer"></Mcs>
      </div>
      <!-- MCS 录音型-->
      <div
        v-if="
          item.typeCode == 'MCS' &&
          item.subjectType == '2' &&
          tmNum - 1 == index
        "
      >
        <Mcs
          :Num="tmNum"
          :item="item"
          :url="item.url"
          @sendAnswer="getAnswer"
        ></Mcs>
      </div>

      <!-- MCM题型 -->
      <div v-if="item.typeCode == 'MCM' && tmNum - 1 == index">
        <Mcm :Num="tmNum" :item="item" @sendAnswer="getAnswer"></Mcm>
      </div>
      <!-- RA题型 -->
      <div v-if="item.typeCode == 'RA' && tmNum - 1 == index">
        <Ra
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></Ra>
      </div>

      <!-- RP题型 -->
      <div v-if="item.typeCode == 'RP' && tmNum - 1 == index">
        <Rp
          :Num="tmNum"
          :item="item"
          :id="item.id"
          @sendAnswer="getAnswer"
        ></Rp>
      </div>

      <!-- DI题型 -->
      <div v-if="item.typeCode == 'DI' && tmNum - 1 == index">
        <Di :Num="tmNum" :item="item" @sendAnswer="getAnswer"></Di>
      </div>

      <!-- RL题型 -->
      <div v-if="item.typeCode == 'RL' && tmNum - 1 == index">
        <Rl
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></Rl>
      </div>

      <!-- RS题型 -->
      <div v-if="item.typeCode == 'RS' && tmNum - 1 == index">
        <Rs
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></Rs>
      </div>

      <!-- HIW题型 -->
      <div v-if="item.typeCode == 'HIW' && tmNum - 1 == index">
        <Hiw
          :Num="tmNum"
          :url="item.url"
          :item="item"
          :hiwContent="hiwContent"
          @sendAnswer="getAnswer"
        ></Hiw>
      </div>

      <!-- SST -->
      <div v-if="item.typeCode == 'SST' && tmNum - 1 == index">
        <Sst
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></Sst>
      </div>

      <!-- SWT -->
      <div v-if="item.typeCode == 'SWT' && tmNum - 1 == index">
        <Swt
          :Num="tmNum"
          :url="item.url"
          :item="item"
          :list="list"
          @sendAnswer="getAnswer($event)"
        ></Swt>
      </div>

      <!-- SMW -->
      <!-- <div v-if="item.typeCode == 'SMW' && tmNum - 1 == index">
        <Smw :Num="tmNum" :url="item.url" :item="item"></Smw>
      </div> -->

      <!-- HCS题型 -->
      <div v-if="item.typeCode == 'HCS' && tmNum - 1 == index">
        <Hcs :Num="tmNum" :item="item" @sendAnswer="getAnswer"></Hcs>
      </div>

      <!-- FIBRW -->
      <div v-if="item.typeCode == 'FIBRW' && tmNum - 1 == index">
        <Fibrw :Num="tmNum" :item="item" @sendAnswer="getAnswer"></Fibrw>
      </div>

      <!-- FIBR -->
      <div v-if="item.typeCode == 'FIBR' && tmNum - 1 == index">
        <Fibr
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
          @nodone="nodone($event)"
          @sendNum="sendNum"
          @sendAnswerLen="getAnswerLen($event)"
        ></Fibr>
      </div>

      <!-- WFD -->
      <div v-if="item.typeCode == 'WFD' && tmNum - 1 == index">
        <Wfd
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></Wfd>
      </div>

      <!-- WE -->
      <div v-if="item.typeCode == 'WE' && tmNum - 1 == index">
        <We
          :Num="tmNum"
          :url="item.url"
          :item="item"
          @sendAnswer="getAnswer"
        ></We>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="btns" v-if="list.length">
      <div @click="goToPrev()">上一题</div>
      <div @click="goToNext()">下一题</div>
      <!-- <div @click="reset()">重做</div> -->
      <!-- 申请批改组件 -->
      <!-- <apply :tmNum="tmNum" :list="list"></apply> -->

      <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        icon="el-icon-info"
        icon-color="red"
        title="请确认申请批改!"
        @confirm="confirmApply"
        @cancle="cancleApply"
      >
        <div slot="reference" v-if="!isSub">申请批改</div>
        <div slot="reference" class="sqxg" v-if="isSub">申请修改</div>
      </el-popconfirm>

      <div
        class="all_sub"
        @click="allSubmit"
        v-if="tmNum == list.length && percentage == 100"
      >
        完成
      </div>

      <!-- <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        icon="el-icon-info"
        icon-color="red"
        title="请确认修改!"
        @confirm="confirmApply"
        @cancle="cancleApply"
        v-if="isSub"
      >
        <div class="xiug" slot="reference">修改</div>
      </el-popconfirm> -->
    </div>

    <div class="progress" v-if="list.length">
      <div>
        完成进度：<span class="percent">{{ percentage }}%</span>
      </div>
      <div><el-progress :percentage="percentage"></el-progress></div>
    </div>
    <h2 v-if="!list.length">暂无作业</h2>
  </div>
</template>

<script>
// import Audioplayer from '../player'
import { sendPost, blobToBase64 } from "@/utils/http";
import Recorder from "js-audio-recorder";
const recorder = new Recorder({
  sampleBits: 8, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 24000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1 // 声道，支持 1 或 2， 默认是1
  // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
});
import writingUtil from "@/utils/writingUtil";
import { uploadOSS } from '@/utils/oss'

// import apply from './apply'
import api from "@/config/api";

import Asq from './ASQ'
import Fib from './FIB'
import Mcs from './MCS'
import Mcm from './MCM'
import Ra from './RA'
import Rp from './RP'
import Rs from './RS'
import Di from './DI'
import Hiw from './HIW'
import Hcs from './HCS'
import Fibrw from './FIBRW'
import Fibr from './FIBR'
import Wfd from './WFD'
import Sst from './SST'
import Rl from './RL'
import Swt from './SWT'
import Smw from './SMW'
import We from './WE'
export default {
  props: ['list'],
  mixins: [writingUtil],
  components: {
    Asq,
    Fib,
    Mcs,
    Mcm,
    Fibrw,
    Fibr,
    Di,
    Ra,
    We,
    Rs,
    Rp,
    Hiw,
    Sst,
    Smw,
    Wfd,
    Rl,
    Swt,
    // apply,
    // Audioplayer,
    Hcs
  },

  data () {
    return {
      tmNum: 1, // 题目标号
      total: 1,
      subNum: 0,
      answer: '',
      id1: '',
      answerList: [],
      flag: false,
      hiwContent: [],
      isDone: false,
      ifAllowSub: false,
      isSub: false,  // 本题是否已经提交
      length: 0, // 提交的答案个数
      totalSelect: 0 // 选项个数
    }
  },

  created () {


    this.total = this.list.length
    if (this.item !== undefined) {
      this.hiwContent = this.item.content.split(' ')
    }


    console.log(recorder);


  },
  mounted () {
    var that = this
    setTimeout(() => {
      that.getIfSubmited()
    }, 1000);


  },
  methods: {

    allSubmit () {
      sendPost(api.submitWork, {
        id: this.list[0].workId
      }).then(res => {
        console.log(res);
        if (res.success == 0) {
          this.$msg.success('作业完成!')
        } else {
          this.$msg.error(res.msg)
        }
      })
    },

    getIfSubmited () {
      console.log(this.list, this.tmNum - 1);
      console.log(this.list[this.tmNum - 1]);
      var tmDetail = this.list[this.tmNum - 1]
      if (tmDetail.answer) {
        this.isSub = true
      } else {
        this.isSub = false
      }

      console.log(this.isSub);
    },
    // 获取答案的个数
    getAnswerLen (e) {
      console.log(e);
      if (e == false) {
        this.ifAllowSub = true
      } else {
        this.ifAllowSub = false
      }
    },
    sendNum (e) {
      console.log(e, 99);
    },
    // 未完成提交
    nodone () {
      // this.$msg.info('请将答案填写完整!')

    },
    reset () {
      // this.$router.go(0)

    },
    getAnswer (e, flag) {
      this.length=0
      this.totalSelect = e.split(',').length
      e.split(',').forEach(item => {
        if (item !== '') {
          this.length++
        }
      })
      console.log(this.length);


      this.answer = ''
      if (flag) {
        if (!this.answerList.includes(e)) {
          this.answerList.push(e)
        } else {
          let i = this.answerList.indexOf(e)
          console.log(i);
          this.answerList.splice(i, 1)
        }
        console.log(this.answerList);
        this.answer = this.answerList.join(',')
        console.log(this.answer);
      } else {
        this.answer = e
      }
    },
    // 上一题
    goToPrev () {
      // 再次刷新数据，更新视图
      this.$emit('updateList')
      // 获取该题是否已经提交
      var that = this
      setTimeout(() => {
        that.getIfSubmited()
      }, 100);


      // // 如果是提交过的题目，回显答案
      // if (this.isSub) {
      //   this.answer=this.list[this.tmNum - 1].answer
      // }

      if (this.tmNum > 1) {
        this.tmNum--
        this.id1 = this.list[this.tmNum - 2].id
        this.answer = ''
        console.log(this.list[this.tmNum - 2].id);
      } else {
        this.$msg.info('没有上一题了!')
      }


    },
    // 下一题
    goToNext () {
      // 再次刷新数据，更新视图
      this.$emit('updateList')
      // 获取该题是否已经提交
      var that = this
      setTimeout(() => {
        that.getIfSubmited()
      }, 100);

      if (this.tmNum < this.list.length) {
        this.tmNum++
        this.answer = ''
        this.id1 = this.list[this.tmNum - 2].id
        window.scrollTo({
          left: 0,
          top: 550,
          behavior: 'smooth'
        })

      } else {
        this.$msg.info('没有下一题了!')
      }




    },
    // 申请批改
    applyCheck () {

    },
    // 申请批改作业
    confirmApply () {

      this.id1 = this.list[this.tmNum - 1].id
      // 如果是录音题
      if (this.list[this.tmNum - 1].typeCode == 'RA'
        || this.list[this.tmNum - 1].typeCode == 'RS'
        || this.list[this.tmNum - 1].typeCode == 'RL'
        || this.list[this.tmNum - 1].typeCode == 'ASQ'
        || this.list[this.tmNum - 1].typeCode == 'DI') {
        // this.getFile()
        this.getFile()  // 获取录音 并上传
      } else {
        // 非录音题
        if (this.answer) {
          if (this.length < this.totalSelect) {
            this.$msg.info('请将答案填写完整!')
          } else {
            // 有答案，允许提交
            sendPost(api.submitWorkDetail, {
              id: this.id1,
              answer: this.answer
            }).then(res => {
              console.log(res);
              if (res.msg == '提交成功') {
                this.$msg.success('申请批改成功!')
                this.answer = ''
                // 更新修改的按钮样式
                var that = this
                that.isSub = true
                // 再次刷新数据，更新视图
                this.$emit('updateList')
              }
            })

          }

        } else {
          this.$msg.info('请将答案填写完整！')
        }
      }



    },
    cancleApply () {
      console.log('cancle');
    },

  },
  computed: {
    percentage () {
      // let str = Math.ceil(Number(this.subNum / this.list.length * 100))
      var len = this.list.length
      var per = 0
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].answer) {
          per++
        }
      }
      let str = Math.ceil(Number(per / len * 100))

      return str;
    }
  },
}
</script>

<style lang="less" scoped>
.sqxg {
  color: #13bfbf !important;
  border: 1px solid #13bfbf !important;
}
.xiug {
  border: 1px solid #abcdef !important;
  color: #abcdef !important;
}
.exName {
  font-size: 20px;
  color: #666;
  margin-bottom: 1.25rem;
}
.btns {
  display: flex;
  width: 32.875rem;
  margin: auto;
  justify-content: space-between;
  color: #ff5e4e;
  font-size: 1.125rem;
  margin-top: 2.5rem;
  div {
    width: 8rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    cursor: pointer;
    border: 0.0625rem solid #ff5e4e;
    border-radius: 0.3125rem;
    user-select: none;
  }
}
.progress {
  margin-top: 1rem;
  height: 1.875rem;
  line-height: 1.875rem;
  font-size: 1rem;
  color: #999;
  .percent {
    color: #ff5e4e;
  }
  /deep/.el-progress-bar__inner {
    background-color: #ff5e4e;
  }
}

.box {
  border: 1px dashed #ff5e4e;
}
</style>